<template>
  <div class="example-wrap">
    <wu-table :table-module="tableModule">
      <template #date="scope">自定义：{{ scope.row.date }}</template>
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </template>
      <template #topActions>
        <el-button>slot#topActions按钮</el-button>
      </template>
      <template #bottomActions>
        <el-button>slot#bottomActions按钮</el-button>
      </template>
    </wu-table>
    <!-- 新增弹窗 -->
    <add-dia ref="addDia" :title="diaTitle"></add-dia>
  </div>
</template>

<script setup lang="ts">
import { getProductBaseTrademark } from '@/apis/goods'
import { logoInt, logoParamsInt } from '@/types/goods'
import { column, formItem, tableModuleType } from '@/types/wu-table'
import AddDia from './components/AddDia.vue'
const tableData = reactive<logoInt[]>([])
// add弹窗ref
const addDia = ref()
const diaType = ref<'add' | 'edit'>('add')
const diaTitle = computed(() => {
  return diaType.value === 'add' ? '新增' : '编辑'
})

const columns = reactive<column[]>([
  { prop: 'id', label: '编号' },
  { prop: 'tmName', label: '品牌名称' },
  { prop: 'logoUrl', type: 'image', label: '品牌标志' },
  {
    label: '操作',
    width: '300px',
    actions: [
      {
        text: '新增',
        icon: 'Plus',
        clickFun: () => {
          diaType.value = 'add'
          addDia.value?.openDia()
        }
      },
      {
        text: '编辑',
        icon: 'Edit',
        clickFun: (scope: any) => {
          console.log('action-编辑-clickFun', scope)
          diaType.value = 'edit'
          addDia.value?.openDia()
        }
      },
      {
        text: '删除',
        icon: 'Delete',
        clickFun: (scope: any) => {
          console.log('action-删除-clickFun', scope)
        }
      }
    ]
  }
])
// 表格数据收集
const queryForm = reactive<logoParamsInt>({
  tmName: '',
  page: 1,
  limit: 5
})
// 搜索表单数据
const formItemList = reactive<formItem[]>([
  { type: 'input', prop: 'tmName', initValue: '小吴加油' },
  { type: 'date', dateType: 'datetime', prop: 'createTime' },
  {
    type: 'daterange',
    dateType: 'daterange',
    startProp: 'startTime',
    endProp: 'endTime',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间'
  },
  {
    type: 'select',
    prop: 'sex',
    dictList: [
      { label: '男', value: 1 },
      { label: '女', value: 0 }
    ]
  }
])

const tableModule = reactive<tableModuleType>({
  staticTableData: tableData,
  columns: columns,
  page: {
    showPage: true,
    pageNumKey: 'page',
    pageSizeKey: 'limit'
  },
  queryForm,
  getListApi: getProductBaseTrademark,
  formItemList,
  topActions: [
    {
      text: '新增',
      icon: 'Plus',
      type: 'primary',
      clickFun: (scope: any) => {
        diaType.value = 'add'
        addDia.value?.openDia()
      }
    },
    {
      text: '编辑',
      clickFun: (scope: any) => {
        console.log('action-编辑-clickFun', scope)
        diaType.value = 'edit'
        addDia.value?.openDia()
      }
    }
  ]
})
</script>

<style lang="scss" scoped></style>
